<!-- 课程卡片 -->
<template>
  <div
    class="box"
    :style="{ width: cardWidth + 'px', height: cardHeight + 'px' }"
    @click.stop="onClickCard(data)"
    @mouseenter="showOverlay = true"
    @mouseleave="showOverlay = false"
  >
    <div class="picture-display">
      <a-image
        :src="customImgUrl(data?.previewPath || '', 329 * 2, 203 * 2)"
        class="object-cover"
        :fallback="downloadImage"
        :preview="false"
      />
      <transition>
        <!-- <div class="overlay" :class="{ 'show-overlay': showOverlay }" :title="data?.description">{{ data?.description }}</div> -->
        <div v-if="showOverlay" class="overlay show-overlay" :title="data?.description">{{ data?.description }}</div>
      </transition>
    </div>

    <div class="box-content">
      <div class="head mt-12">
        <div class="head-up">
          <div class="left-title">
            <span class="elliptical-1 title-text" :title="data?.name">{{ data?.name }}</span>
          </div>
          <div class="head-right">
            <div class="collect">
              <collect-button
                :show-default-text="false"
                :default-status="data?.favorite"
                msg="是否取消收藏此课程?"
                :favorite-obj-type="1"
                :favorite-obj-name="data?.name"
                :favorite-obj-id="data?.id"
                @on-click="setCollect"
                @click-ok="ok"
              />
            </div>
          </div>
        </div>
        <div class="label-group">
          <div v-for="(item, index) in allLabels" :key="index">
            <div
              v-if="index < showLabelNumber"
              class="base-label label-text max-w-90 elliptical-1"
              :class="[item.labelType === 2 ? 'class-is-grade' : '']"
              :title="item.labelName"
            >
              {{ item.labelName }}
            </div>
            <a-popover v-else-if="index === showLabelNumber">
              <template #content>
                <div class="bottom-tooltip">
                  <div v-for="(item, index) in omitTitle" :key="index">
                    <div class="base-label tooltip-label-text" :title="item.labelName">{{ item.labelName }}</div>
                  </div>
                </div>
              </template>
              <div class="base-label label-text">...</div>
            </a-popover>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue'

  // import downloadImage from '@/assets/img/download.png'
  import downloadImage from '@/assets/img/imageFailed.svg'
  import { customImgUrl } from '@/utils'

  import CollectButton from '../CollectButton/index.vue'

  export interface ClassSquareCardData {
    categories: CourseLabelInfoVO[]
    createTime?: null | string
    description?: string
    favorite?: boolean
    id?: string
    levels: CourseLabelInfoVO[]
    name?: string
    previewUrl?: string | undefined
    previewPath?: string | undefined
    updateTime?: null | string
  }

  export interface CourseLabelInfoVO {
    courseId?: number | null
    id?: number
    labelId?: number | null
    labelName?: string
    labelType?: number | null
  }

  export interface LabelList {
    name: string
  }
  export interface DataSetCardProps {
    data?: ClassSquareCardData
    cardWidth?: number
    cardHeight?: number
  }
  let props = withDefaults(defineProps<DataSetCardProps>(), {
    cardWidth: 329,
    cardHeight: 277
  })
  let emits = defineEmits(['onClick', 'onCollect', 'okCancel'])
  const omitTitle = ref<any[]>()
  const showLabelNumber = 3
  const onClickCard = (param: ClassSquareCardData | null | undefined) => {
    emits('onClick', param)
  }
  /**
   *  两个方法，一个是进行数据集的收藏和取消
   * */
  const setCollect = (item: ClassSquareCardData) => {
    emits('onCollect', item)
  }
  // 确认取消
  const ok = () => {
    emits('okCancel')
  }
  const getBeyondTitle = () => {
    let arr = allLabels.value
    if (arr) {
      let LABEL_LIST_LENGTH = arr.length
      let sumName = []
      if (arr.length > showLabelNumber) {
        for (let i = showLabelNumber; i < LABEL_LIST_LENGTH; i++) {
          sumName.push(arr[i])
        }
      }
      omitTitle.value = sumName
    }
  }
  const showOverlay = ref<boolean>(false)

  // 所有标签
  const allLabels = ref<CourseLabelInfoVO[]>()
  onMounted(() => {
    allLabels.value = props.data?.levels.concat(props.data?.categories)
    getBeyondTitle()
  })
</script>
<style lang="less" scoped>
  .box {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;

    /* gap: 12px; */
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;

    .overlay {
      position: absolute;
      bottom: 0;
      z-index: 2;
      display: none;
      overflow: hidden; /* 隐藏溢出部分 */
      padding: 4px 8px;
      width: 100%;
      height: 52px;
      font-size: 14px;
      color: #fff;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
      line-height: 22px; /* 157.143% */
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; /* 控制显示的行数 */
      word-break: break-all;
    }

    .show-overlay {
      display: -webkit-box;
    }

    .picture-display {
      position: relative;
      width: 100%;
      height: 206px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .box-content {
      align-self: stretch;
    }

    .head {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      align-self: stretch;

      .head-up {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;

        .left-title {
          display: flex;
          align-items: center;
          width: calc(100% - 26px);
          height: 24px;
          gap: 8px;

          .title-text {
            font-size: 14px;
            color: rgba(21, 23, 27, 0.95);
            font-weight: 700;
            line-height: 22px; /* 157.143% */
            .elliptical-1();
          }
        }

        .head-right {
          display: flex;
          align-items: center;
          gap: 8px;

          .collect,
          .load {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 18px;
            font-size: 18px;
            border-radius: 6px;
            gap: 6px;
          }
        }
      }

      .label-group {
        display: flex;
        align-items: flex-start;
        margin: 12px 0 0;
        height: 26px;
        flex-wrap: wrap;
        gap: 6px;

        .class-is-grade {
          color: #c76300;
          background: #fcdfb0;
          border: 1px solid 0, 0, 0, 0.05;
        }
      }

      .head-down {
        display: -webkit-box;
        overflow: hidden;
        font-size: 14px;
        text-overflow: ellipsis;
        color: rgba(25, 25, 48, 0.75);
        line-height: 20px; /* 166.667% */
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; /* 设置最多显示的行数 */
      }
    }
  }

  .base-label {
    /* display: flex; */
    justify-content: center;
    align-items: center;
    padding: 3px 6px;
    border: 1px solid var(--mask-1, rgba(0, 0, 0, 0.05));
    border-radius: 6px;
    gap: 6px;
  }

  .label-text {
    // overflow: hidden;
    // max-width: 70px;
    font-size: 12px;
    font-family: 'Noto Sans SC';
    // text-overflow: ellipsis;
    // white-space: nowrap;
    color: #8599bf;
    font-weight: 400;
    line-height: 20px; /* 166.667% */
    word-break: keep-all;
  }

  .tooltip-label-text {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    // color: @text03;
    color: #8599bf;
    font-weight: 400;
    line-height: 20px; /* 166.667% */
    word-break: keep-all;
  }

  .bottom-tooltip {
    display: flex;
    align-items: flex-start;
    max-width: 688px;
    flex-wrap: wrap;
    gap: 6px;
  }

  :deep(.ant-image) {
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: 6px;

    img {
      width: 100%;
      height: 100%;
    }
  }
</style>
